<template>
	<view>
		<view class="top-background">
			<!-- <view class="message">
				<image mode="widthFix" style="width: 24px;" src="../../static/person/message.png"></image>
			</view> -->
			<view class="user-info">
				<image v-if="userInfo.user_info.photo_url" :src="userInfo.user_info.photo_url"></image>
				<image v-if="!userInfo.user_info.photo_url" src="http://rzkeji.oss-cn-shenzhen.aliyuncs.com/web/aueco_wxapp/default.png"></image>
				<text v-if="userInfo.user_info">{{userInfo.user_info.nickname}} [余额：{{userInfo.balance}}元]</text>
				<button v-if="!userInfo.user_info" class="login_btn" open-type="getUserInfo" @getuserinfo="bindGetUserInfo">注册/登录</button>
			</view>
<!--			 <view class="member">-->
<!--				<view class="member-text">-->
<!--					<text>开通会员</text>-->
<!--					<text>花0.25/天，预计省900元/年</text>-->
<!--				</view>-->
<!--				<view class="member-button">立即开通</view>-->
<!--			</view>-->
		</view>
		
		<!-- 中间菜单栏 -->
		<view class="menu">
		  <view class="menu_title">
		    <view class="title_left">我的订单</view>
		    <view class="title_right" @click="toOrder('')">更多订单</view>
		  </view>
		  <view class="menu_item cartIcon_wrapper" @click="toOrder('1')">
		    <image src="../../static/person/tuihuo.png" alt="">
		    <view class="pay-text">待支付</view>
		    <view class="cartIcon1" v-if="orderList.Pending_payment!=0&&orderList.Pending_payment">{{orderList.Pending_payment}}</view>
		  </view>
		  <view class="menu_item cartIcon_wrapper" @click="toOrder('1')">
		    <image src="../../static/person/daishouhuo.png" alt="">
		    <view class="pay-text">待发货</view>
		    <view class="cartIcon1" v-if="orderList.Pending_payment!=0&&orderList.Pending_payment">{{orderList.Pending_payment}}</view>
		  </view>
		  <view class="menu_item cartIcon_wrapper" @click="toOrder('1')">
		    <image src="../../static/person/yiwancheng.png" alt="">
		    <view class="pay-text">待收货</view>
		    <view class="cartIcon1" v-if="orderList.Pending_payment!=0&&orderList.Pending_payment">{{orderList.Pending_payment}}</view>
		  </view>
		  <view class="menu_item cartIcon_wrapper" @click="toOrder('1')">
		    <image src="../../static/person/tuihuo.png" alt="">
		    <view class="pay-text">已完成</view>
		    <view class="cartIcon1" v-if="orderList.Pending_payment!=0&&orderList.Pending_payment">{{orderList.Pending_payment}}</view>
		  </view>
		</view>
		<!-- 中间菜单栏 -->
		
		<view style="width: 100vw;height: 8px;background-color: #EFEFEF;"></view>
		
		<!-- 列表栏 -->
		<view class="list">
			<view class="list_item">
			  <navigator v-if="userInfo.user_info" hover-class="none" url="../address/address" >
			    <image src="../../static/person/dingwei.png" />
			    <span>收货地址</span>
			    <span class="list_item_arrow">
			      <image src="../../static/person/fanhui.png" alt="">
			    </span>
			  </navigator>
			  <button v-if="!userInfo.user_info" open-type="getUserInfo" @getuserinfo="bindGetUserInfo">
			    <image src="../../static/person/dingwei.png" />
			    <span>收货地址</span>
			    <span class="list_item_arrow">
			      <image src="../../static/person/fanhui.png" alt="">
			    </span>
			  </button>
			</view>
			
<!--			<view class="list_item">-->
<!--			  <navigator hover-class="none" url="../coupon/coupon" >-->
<!--			    <image src="../../static/person/jiamen.png" />-->
<!--			    <span>我的优惠券</span>-->
<!--			    <span class="list_item_arrow">-->
<!--			      <image src="../../static/person/fanhui.png" alt="">-->
<!--			    </span>-->
<!--			  </navigator>-->
<!--			</view>-->
			
			<view class="list_item">
			  <button open-type="contact">
			    <image src="../../static/person/lianxikefu.png" />
			    <span>联系客服</span>
			    <span class="list_item_arrow">
			      <image src="../../static/person/fanhui.png" alt="">
			    </span>
			  </button>
			</view>
			
			<view class="list_item">
			  <navigator hover-class="none" url="../aboutUs/index" >
			    <image src="../../static/person/shezhi.png" />
			    <span>关于我们</span>
			    <span class="list_item_arrow">
			      <image src="../../static/person/fanhui.png" alt="">
			    </span>
			  </navigator>
			</view>
			
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userInfo: ''
			}
		},
		onShow(){
            this.getUserInfos();
			wx.showTabBar();
        },
		methods: {
			//微信授权
			async bindGetUserInfo(){
                var _this=this;
                uni.login({
                    success: res =>{
                        let code = res.code;
                        uni.getUserInfo({
                            success: async res => {
                                let params = {
                                    raw_data:res.rawData,
                                    signature:res.signature,
                                    code:code
                                }
								wx.showLoading({
									title: '正在登录'
								})
                                const result = await _this.$api.wxAppLogin(params);
                                if (result.data.level == 'success'){
                                    uni.setStorageSync('userToken',result.data.data);
									_this.getUserInfos()
                                } else{
									wx.hideLoading();
									wx.showToast({
										title: result.data.message,
										duration: 1500
									})
								}
                            }
                        })
                    }
                })
            },
			
			//获取个人信息
            async getUserInfos(){
                let userToken=uni.getStorageSync('userToken');
                const res=await this.$api.getUserInfos({user_token:userToken});
                if(res.data.level=='success'){
                    this.userInfo=res.data.data
                }
				wx.hideLoading()
            },
			
			//进入订单页面
			toOrder() {
				wx.navigateTo({
					url: '../order/order'
				})
			}
			
		}
	}
</script>

<style scoped lang="scss">
	.top-background{
		width: 100vw;
		height: 200px;
		/*background-image: url(../../static/person/person_backgroud.png);*/
		background-color: #f64949;
		background-size: 100% auto;
		background-repeat: no-repeat;
		position: relative;
		.message{
			position: absolute;
			top: 10px;
			right: 10px;
		}
		.user-info{
			position: absolute;
			top: 80px;
			left: 50%;
			transform: translateX(-50%);
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			image{
				width: 60px;
				height: 60px;
				border-radius: 50%;
			}
			text{
				margin-top: 8px;
				font-size: 14px;
				color: #FFFFFF;
			}
			.login_btn{
			  padding: 0;
			  /*margin: 0;*/
			  background: none;
			  border: none;
			  color: #ffffff;
			}
			.login_btn::after,.nick_name>.phone-btn::after{
			  border: none;
			}
		}
		.member{
			width: calc(100vw - 60px);
			height: 65px;
			position: absolute;
			bottom: 10px;
			left: 50%;
			transform: translateX(-50%);
			background-color: #2C2C2C;
			border-radius: 10px;
			/* background-image: url(../../static/person/member_content.png);
			background-size: 100% auto;
			background-repeat: no-repeat; */
			display: flex;
			justify-content: space-between;
			align-items: center;
			.member-text{
				color: #F2C991;
				font-size: 14px;
				display: flex;
				flex-direction: column;
				margin-left: 28px;
			}
			.member-button{
				width: 80px;
				height: 30px;
				background-color: #EBC28D;
				border-radius: 15px;
				line-height: 30px;
				text-align: center;
				font-size: 12px;
				color: #3A362D;
				margin-right: 15px;
			}
		}
	}
	
	/* 中间菜单栏 */
	.menu{
	  background: #ffffff;
	  /*background:#222222;*/
	  width:calc(100vw - 20px);
	  display: flex;
	  flex-wrap: wrap;
	  /*height: 100px;*/
	  margin:10px;
	  border-radius: 4px;
	  /*color: #ffffff;*/
	}
	.menu_title{
	  width: 100%;
	  display: flex;
	  height: 30px;
	  padding-bottom: 10px;
	  flex-direction: row;
	  align-items: center;
	  justify-content: flex-start;
	}
	.menu_title>.title_left{
	  font-size: 16px;
	  padding: 0 15px;
	  font-weight: bold;
	}
	.menu_title>.title_right{
	  margin-left: auto;
	  padding: 0 15px;
	  font-size: 12px;
	  color: #666666;
	  /*color: #aaaaaa;*/
	}
	.menu_item{
	  font-size: 12px;
	  flex:1;
	  display: flex;
	  flex-direction: column;
	  justify-content: center;
	  align-items: center;
	  margin: 10px 0;
	}
	.menu_item>image{
	  width:27px;
	  height:25px;
	}
	.pay-text{
		margin-top: 8px;
	}
	
	/* 列表栏 */
	
	.list{
	  width:calc(100vw - 20px);
	  margin:10px;
	  background: #ffffff;
	  font-size: 14px;
	  /*background:#222222;*/
	  border-radius: 4px;
	  /*color: #ffffff;*/
	}
	.list_item ,navigator{
	  width:100%;
	  height:50px;
	  display: flex;
	  justify-content: space-between;
	  align-items: center;
	  border-bottom:1px solid #eee;
	}
	.list_item>button{
	  width:100%;
	  height:50px;
	  display: flex;
	  font-size: 14px;
	  justify-content: space-between;
	  align-items: center;
	  background: #ffffff;
	  /*background:#222222;*/
	  padding: 0;
	  /*color: #ffffff;*/
	}
	.list_item>button::after{
	  border: none;
	}
	.list_item>span:nth-child(1){
	  margin-left: 15px;
	}
	navigator>span:nth-child(1){
	  margin-left: 15px;
	}
	button>span:nth-child(1){
	  margin-left: 15px;
	}
	navigator>image,button>image{
	  width: 20px;
	  height: 20px;
	  margin: 0 12px 0 30rpx;
	}
	.list_item_arrow{
	  display: flex;
	  flex:1;
	  justify-content: flex-end;
	  margin-right:10px;
	}
	.list_item_arrow>image{
	  width:7px;
	  height:12px;
	}
	
	.cartIcon_wrapper{
	  position: relative;
	}
	.cartIcon{
	  font-size: 10px;
	  position: absolute;
	  background:red;
	  left:50px;
	  width:15px;
	  height: 15px;
	  line-height: 15px;
	  color:#fff;
	  text-align: center;
	  border-radius: 50%;
	  top:5px;
	}
	.cartIcon1{
	  font-size: 10px;
	  position: absolute;
	  background:red;
	  left:50px;
	  width:15px;
	  height: 15px;
	  line-height: 15px;
	  color:#fff;
	  text-align: center;
	  border-radius: 50%;
	  top:-5px;
	}
	
</style>
